<template>
    <div class='content' v-html="computedText"></div>
</template>
<script lang="ts" setup>
import { inject, computed } from 'vue'
import { getImgTags, getImgPathByTag } from '@/assets/images/emotion/index.ts'
const tags = getImgTags()
const item = inject('item', {})
const computedText = computed(()=> replaceImg(item.message))
const replaceImg = (text: string) => {
  // 创建一个正则表达式来匹配所有特殊字符
  const regex = new RegExp(tags.join('|'), 'g');
  // 替换文本中的特殊字符为对应的图片
  const replacedText = text ? text.replace(regex, (match) => {
    const imgElement = document.createElement('img');
    imgElement.src = getImgPathByTag(match);
    imgElement.alt = match;
    imgElement.style.width = '15px';
    imgElement.style.height = '15px';
    return imgElement.outerHTML;
  }) : '';

  return replacedText;
}
</script>
<style lang="less" scoped>
.content {
    font-size: 14px;
    color: #252525;
}
</style>